---
title: Frameworks front-end
description: Créez votre site web Astro avec React, Svelte et plus encore.

---
import IntegrationsNav from '~/components/IntegrationsNav.astro'
import ReadMore from '~/components/ReadMore.astro'

Construisez votre site Astro sans sacrifier votre framework de composants préféré. Créez des [îlots](/fr/concepts/islands/) Astro avec les frameworks UI de votre choix.

## Intégrations officielles de framework front-end

Astro prend en charge un large choix de frameworks comme [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [SolidJS](https://www.solidjs.com/) et [AlpineJS](https://alpinejs.dev/) avec des intégrations officielles.

Vous trouverez d'autres [intégrations de frameworks gérés par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=frameworks) (par exemple Angular, Qwik, Elm) dans notre répertoire d'intégrations.

<IntegrationsNav category="renderer" />

## Installation d'intégrations

Une ou plusieurs de ces intégrations Astro peuvent être installées et configurées dans votre projet.

Consultez le [guide des intégrations](/fr/guides/integrations-guide/) pour plus de détails sur l'installation et la configuration d'intégrations Astro.

:::tip
Vous voulez voir un exemple pour le framework de votre choix ? Visitez [astro.new](https://astro.new/latest/frameworks) et sélectionnez l'un des modèles de framework.
:::

## Utilisation des composants de framework

Utilisez vos composants de framework JavaScript dans vos composants, pages et mises en page Astro comme des composants Astro classiques ! Tous vos composants peuvent être placés dans `/src/components`, ou peuvent être organisés de la manière que vous le souhaitez.

Pour utiliser un composant de framework, importez-le à partir de son chemin d'accès relatif dans votre script de composant Astro. Ensuite, utilisez le composant avec d'autres composants, éléments HTML et expressions de type JSX dans le modèle de composant.

```astro title="src/pages/static-components.astro" ins={2,7}
---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<html>
  <body>
    <h1>Utilisez des composants React directement dans Astro !</h1>
    <MyReactComponent />
  </body>
</html>
```

Par défaut, vos composants de framework seront rendus en HTML statique. C'est pratique pour les composants qui n'ont pas à être interactifs et évite de transmettre à l'utilisateur du JavaScript inutile.

## Hydratation des composants interactifs

Un composant du framework peut être rendu interactif (hydraté) à l'aide d'une directive [`client:*`](/fr/reference/directives-reference/#directives-client). Il s'agit d'attributs de composant qui déterminent quand le JavaScript de votre composant doit être envoyé au navigateur.

Avec toutes les directives client à l'exception de `client:only`, votre composant sera d'abord rendu sur le serveur pour générer du HTML statique. Le JavaScript du composant sera envoyé au navigateur en fonction de la directive que vous avez choisie. Le composant s'hydrate alors et devient interactif.

```astro title= "src/pages/interactive-components.astro" /client:\S+/
---
// Exemple : hydratation des composants de framework dans le navigateur.
import InteractiveButton from '../components/InteractiveButton.jsx';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
import InteractiveModal from '../components/InteractiveModal.svelte';
---
<!-- Le JS de ce composant commencera à être importé au chargement de la page -->
<InteractiveButton client:load />

<!-- Le JS de ce composant ne sera envoyé au client que lorsque
l'utilisateur aura défilé vers le bas et que le composant sera visible sur la page -->
<InteractiveCounter client:visible />

<!--Ce composant ne sera pas généré sur le serveur, mais sur le client lorsque la page se chargera. -->
<InteractiveModal client:only="svelte" />
```

Le framework JavaScript (React, Svelte, etc.) nécessaire au rendu du composant sera envoyé au navigateur avec le JavaScript du composant. Si deux composants ou plus sur une page utilisent le même framework, le framework ne sera envoyé qu'une seule fois.

:::note[Accessibilité]
La plupart des modèles d'accessibilité spécifiques au framework devraient fonctionner de la même manière lorsque ces composants sont utilisés dans Astro. Veillez à choisir une directive client qui garantira que tout JavaScript lié à l'accessibilité est correctement chargé et exécuté au moment opportun !
:::

### Directives d'hydratation disponibles

Il y a plusieurs directives d'hydratation disponibles pour les composants de framework : `client:load`, `client:idle`, `client:visible`, `client:media={QUERY}` et `client:only={FRAMEWORK}`.

<ReadMore>Allez voir notre [page de référence des directives](/fr/reference/directives-reference/#directives-client) pour une description complète de ces directives, et de leur utilisation.</ReadMore>

## Mélanger des frameworks

Vous pouvez importer et afficher des composants de plusieurs frameworks, dans le même composant Astro.

```astro
---
// Exemple: Mélanger des composants de framework sur la même page.
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>
```

Astro reconnaîtra et affichera votre composant en fonction de son extension de fichier. Pour distinguer les frameworks qui utilisent la même extension de fichier, [une configuration supplémentaire lors du rendu de plusieurs frameworks JSX](/fr/guides/integrations-guide/react/#combinaison-de-plusieurs-frameworks-jsx) (par exemple React et Preact) est requise.

:::caution
Seul les composants **Astro** (`.astro`) peuvent contenir des composants de différents frameworks.
:::

## Transmettre des props aux composants de framework

Les composants Astro peuvent transmettre des props (diminutif pour « propriétés ») aux composants de framework :

```astro title="src/pages/frameworks-props.astro"
---
import TodoList from '../components/TodoList.jsx';
import Counter from '../components/Counter.svelte';
---
<div>
  <TodoList initialTodos={["apprendre Astro", "réviser des PRs"]} />
  <Counter startingCount={1} />
</div>
```




Les propriétés transmises aux composants interactifs du framework [via une directive `client:*`](/fr/reference/directives-reference/#directives-client) doivent être [sérialisées](https://developer.mozilla.org/fr/docs/Glossary/Serialization) : traduites dans un format adapté au transfert sur un réseau ou au stockage. Cependant, Astro ne sérialise pas tous les types de structures de données. Par conséquent, il existe certaines limitations concernant les propriétés qui peuvent être transmises aux composants hydratés.

Les types de propriétés suivants sont pris en charge :
objet simple, `number`, `string`, `Array`, `Map`, `Set`, `RegExp`, `Date`, `BigInt`, `URL`, `Uint8Array`, `Uint16Array`, `Uint32Array` et `Infinity`

Les structures de données non prises en charge transmises aux composants, telles que les fonctions, ne peuvent être utilisées que lors du rendu du composant sur le serveur et ne peuvent pas être utilisées pour fournir de l'interactivité. Par exemple, la transmission de fonctions aux composants hydratés n'est pas prise en charge, car Astro ne peut pas transmettre de fonctions depuis le serveur de manière à les rendre exécutables sur le client.

## Passer des enfants à des composants de framework

Dans un composant Astro, vous **pouvez** transmettre des enfants à des composants de framework. Chaque framework a son propre modèle pour référencer ces enfants : React, Preact et Solid utilisent une propriété spéciale nommée `children`, tandis que Svelte et Vue utilisent l'élément `<slot />`.


```astro title="src/pages/component-children.astro" {5}
---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
  <p>Voilà un panneau latéral avec du texte et un bouton.</p>
</MyReactSidebar>
```

De plus, vous pouvez utiliser les [slots nommés](/fr/basics/astro-components/#les-slots-nommés) pour grouper des enfants spécifiques ensemble.

Dans React, Preact, et Solid, ces emplacements seront convertis en propriété de niveau supérieur. Les noms de slots utilisant le format `kebab-case` seront convertis en `camelCase`.

```astro title="src/pages/named-slots.astro" /slot="(.*)"/
---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
  <h2 slot="title">Menu</h2>
  <p>Voilà un panneau latéral avec du texte et un bouton.</p>
  <ul slot="social-links">
    <li><a href="https://twitter.com/astrodotbuild">Twitter</a></li>
    <li><a href="https://github.com/withastro">GitHub</a></li>
  </ul>
</MySidebar>
```

```jsx /{props.(title|socialLinks)}/
// src/components/MySidebar.jsx
export default function MySidebar(props) {
  return (
    <aside>
      <header>{props.title}</header>
      <main>{props.children}</main>
      <footer>{props.socialLinks}</footer>
    </aside>
  )
}
```

Pour Svelte et Vue ces slots peuvent être référencés avec un élément `<slot>` et l'attribut `name`. Les noms de slots utilisant le format `kebab-case` seront conservés.

```jsx /slot name="(.*)"/
// src/components/MySidebar.svelte
<aside>
  <header><slot name="title" /></header>
  <main><slot /></main>
  <footer><slot name="social-links" /></footer>
</aside>
```

## Imbriquer des composants de framework

Dans un fichier Astro, les enfants de composants de framework peuvent aussi être des composants hydratés. Cela signifie que vous pouvez imbriquer des composants de framework dans d'autres composants de framework.

```astro title="src/pages/nested-components.astro" {10-11}
---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---
<MyReactSidebar>
  <p>Voici une barre latérale avec du texte et un bouton.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>
```

:::caution
N'oubliez pas : les fichiers de composants de framework eux-mêmes (par exemple `.jsx`, `.svelte`) ne peuvent pas mélanger plusieurs frameworks.
:::

Cela vous permet de créer des « applications » entières dans votre framework JavaScript préféré et de les afficher, via un composant parent, sur une page Astro.

:::note
Les composants Astro sont toujours rendus en HTML statique, même lorsqu'ils contiennent des composants de framework qui sont hydratés. Cela signifie que vous pouvez uniquement transmettre des props qui n'effectuent aucun rendu HTML. La transmission des « props de rendu » de React aux composants du framework à partir d’un composant Astro ne fonctionnera pas, car les composants Astro ne peuvent pas fournir le comportement d’exécution du client requis par ce modèle. Utilisez plutôt des slots nommés.
:::

## Puis-je utiliser les composants Astro à l'intérieur des composants de mon framework ?

Tout composant d'interface utilisateur devient un « îlot » de ce framework. Ces composants doivent être écrits entièrement comme du code valide pour ce framework, en utilisant uniquement ses propres importations et paquets. Vous ne pouvez pas importer des composants `.astro` dans un composant de framework d'interface utilisateur (par exemple `.jsx` ou `.svelte`).

Vous pouvez cependant utiliser [le méchanisme de `<slot />` d'Astro](/fr/basics/astro-components/#les-slots) pour passer du contenu statique généré par des composants Astro en tant qu'enfants à vos composants framework **à l'intérieur d'un composant `.astro`**.

```astro title="src/pages/astro-children.astro" {6}
---
import MyReactComponent from  '../components/MyReactComponent.jsx';
import MyAstroComponent from '../components/MyAstroComponent.astro';
---
<MyReactComponent>
  <MyAstroComponent slot="name" />
</MyReactComponent>
```

## Puis-je hydrater des composants Astro ?

Si vous essayez d'hydrater un composant Astro avec un modificateur `client:`, vous obtiendrez une erreur.

Les [composants Astro](/fr/basics/astro-components/) sont des composants de modélisation HTML uniquement, sans exécution côté client. Cependant, vous pouvez utiliser une balise `<script>` dans votre modèle de composant Astro pour envoyer du JavaScript au navigateur qui s'exécute dans la portée globale.

<ReadMore>Apprenez-en plus sur [les `<script>` côté client dans les composants Astro](/fr/guides/client-side-scripts/)</ReadMore>

[mdn-io]: https://developer.mozilla.org/fr/docs/Web/API/Intersection_Observer_API
[mdn-ric]: https://developer.mozilla.org/fr/docs/Web/API/Window/requestIdleCallback
[mdn-mm]: https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia
